<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>123</title>

<link href="${base}/static/plugin/fontawesome/css/font-awesome.min.css" rel="stylesheet" />



<script type="text/javascript" src="${base}/static/js/jquery-1.7.js"></script>

<link href="${base}/static/plugin/tablesorter/css/theme.blue.css" rel="stylesheet">
<%-- <link rel="stylesheet" href="${base}/static/plugin/tablesorter/css/jq.css"> --%>

<script src="${base}/static/plugin/tablesorter/js/jquery.tablesorter.js" type="text/javascript"></script>
<script src="${base}/static/plugin/tablesorter/js/jquery.tablesorter.widgets.js" type="text/javascript"></script>



<style type="text/css">
body {
	padding: 0px auto;
}

.all {
	width: 1024px;
	margin: 0px auto;
}

.head {
	height: 160px;
}

.content {
	min-height: 600px;
}

.content_left {
	min-height: 600px;
	display: inline-block;
	border: 1px solid #E9ECF3;
	width: 233px;
	vertical-align: top;
	background-color: #E9ECF3;
}

.content_right {
	min-height: 600px;
	border: 1px solid #E9ECF3;
	display: inline-block;
	width: 778px;
	vertical-align: top;
	background-color: #E9ECF3;
}

.foot {
	height: 77px;
}

.foot div {
	height: 20px;
	line-height: 36px;
}

.content_left_1_ul {
	display: inline-block;
	width: 230px;
	position: relative;
	left: -40px;
	top: -13px;
}

.content_left_1_ul li {
	line-height: 45px;
	list-style-type: none;
	width: 230px;
}

.content_left_2_ul li {
	line-height: 36px;
	list-style-type: none;
	width: 190px;
	border: 1px solid #E9ECF3;
}

.guide_1_font {
	display: inline-block;
	height: 45px;
	font-family: "Microsoft YaHei" ! important;
	font-size: 18px;
	font-weight: 400;
	color: #485a6a;
	width: 230px;
}

.guide_2_font {
	display: inline-block;
	height: 36px;
	font-family: "Microsoft YaHei" ! important;
	font-size: 16px;
	font-weight: 400;
	color: #485a6a;
	width: 189px;
}

.guide_2 li {
	line-height: 25px;
	list-style-type: none;
	width: 190px;
}

.fa-angle-img {
	margin-left: 50px;
}

#content_title {
	font-family: "Microsoft YaHei" ! important;
	font-size: 20px;
	font-weight: 400;
	color: #485a6a;
}

.content_right_title {
	height: 38px;
}

.content_right_content {
	width: 775px;
	margin: 0px auto;
	min-height: 537px;
	background-color: white;
}

table {
	font-family: 'trebuchet ms', verdana, arial;
}

#logininfo {
	font-size: 12px;
	color: #276DE6;
	line-height: 28px;
}

.guide_1 {
	display: inline-block;
	height: 45px;
	border-radius: 5px; /* 所有角都使用半径为5px的圆角，此属性为CSS3标准属性 */
	background-image: linear-gradient(to bottom, #F2F6F9, #DFDFDE, #D0D0D0);
	filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,
		startColorStr=#F2F6F9, endColorStr=#D0D0D0); /*IE 6 7 8*/
	background-color: #D0D0D0;
}

.guide_2 {
	display: inline-block;
	height: 36px;
	border-radius: 5px; /* 所有角都使用半径为5px的圆角，此属性为CSS3标准属性 */
	background-image: linear-gradient(to bottom, #F2F6F9, #DFDFDE, #D0D0D0);
	/*filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,
		startColorStr=#F2F6F9, endColorStr=#D0D0D0); IE 6 7 8*/
	background-color: #D0D0D0;
}

.selected {
	background-image: linear-gradient(to right, #F2F6F9, #C7EDCC, #D9D9D9);
	/*filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=1,
		startColorStr=#F2F6F9, endColorStr=#C7EDCC); IE 6 7 8*/
	background-color: #C7EDCC;
}
.hovered {
	background-image: linear-gradient(to right, #F2F6F9, #C7EDCC, #D9D9D9);
	/*filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=1,
		startColorStr=#F2F6F9, endColorStr=#C7EDCC); IE 6 7 8*/
	background-color: #C7EDCC;
}
</style>


<script type="text/javascript">
	$(function() {
 		$(".guide_1").mouseover(function() {
			if($(this).attr("class")!="guide_1 selected"){
				$(this).attr("class","guide_1 hovered");
			}
		});
		$(".guide_2").mouseover(function() {
			if($(this).attr("class")!="guide_2 selected"){
				$(this).attr("class","guide_2 hovered");
			}
		});
		
		
		$(".guide_1").mouseout(function() {
			if($(this).attr("class")!="guide_1 selected"){
				$(this).attr("class","guide_1");
			}
			
		});
		$(".guide_2").mouseout(function() {
			if($(this).attr("class")!="guide_2 selected"){
				$(this).attr("class","guide_2");
			}
		});
		
		
		
		$(".guide_1").mousedown(function(){
			$(".guide_1").attr("class","guide_1");
			$(".guide_2").attr("class","guide_2");
			$(this).attr("class","guide_1 selected");
		});
		$(".guide_2").mousedown(function(){
			$(".guide_1").attr("class","guide_1");
			$(".guide_2").attr("class","guide_2");
			$(this).attr("class","guide_2 selected");
		});
		

	})

	
	//树形菜单隐藏展现
	function showFade(id) {
		$("#" + id).next().toggle(100);
		if ($("#" + id + " .fa-angle-img").attr("class") == "fa fa-angle-left fa-angle-img") {
			$("#" + id + " .fa-angle-img").attr("class",
					"fa fa-angle-down fa-angle-img")
		} else {
			$("#" + id + " .fa-angle-img").attr("class",
					"fa fa-angle-left fa-angle-img")
		}
	}
	
	//加载内容部分
	function loadContent(type){
		$.get("${base}/content"+type+".action", function(result){
		    $("#content_right").html(result);
		  });
	}
</script>
</head>

<body>
	<div class="all">

		<div class="head">
		   <img id="head_img" src="${base}/static/img/header.jpg">
		   <div id="logininfo" > <span>&nbsp;&nbsp;当前位置 : 用户中心</span>   <span id="userinfo"  style="float:right">yuexing89757  | 安全退出&nbsp;&nbsp;</span> </div>
		<!--   <hr style="height: 1px; border:1px solid red;"> -->
		</div>



        

		<div class="content">
		
		    <div class="content_left">
		    
		       <ul class="content_left_1_ul">
		             <li id="content_title">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;功能导航</li>
		        
		             <li>
	                      <a class="guide_1" id="guide_1_item1"  href="javascript:;" onclick="showFade(this.id)"   >
	                      
	                        <span class="guide_1_font" >&nbsp;&nbsp;&nbsp;&nbsp;<i class="fa fa-user-circle"></i>在办业务 <span id="fa-angle-img1" class="fa fa-angle-left fa-angle-img"></span></span>
	                      
	                      </a>
	                      
	                      
		                    <ul class="content_left_2_ul" style="display:none">
		                        <li onclick="loadContent(1)"><a href="javascript:;" class="guide_2" id="guide_2_item1">  <span class="guide_2_font">&nbsp;&nbsp;<span class="fa fa-hand-o-right"></span>&nbsp;&nbsp;名称登记</span></a></li>
		                        <li onclick="loadContent(2)"><a href="javascript:;" class="guide_2" id="guide_2_item2">  <span class="guide_2_font">&nbsp;&nbsp;<span class="fa fa-hand-o-right"></span>&nbsp;&nbsp;设立登记</span></a></li>
		                        <li onclick="loadContent(3)"><a href="javascript:;" class="guide_2" id="guide_2_item3">  <span class="guide_2_font">&nbsp;&nbsp;<span class="fa fa-hand-o-right"></span>&nbsp;&nbsp;变更(备案)登记</span></a></li>
		                    </ul>
                      </li>
                      
                      
                      
		             <li>
		                  <a class="guide_1" id="gudie_1_item2" href="javascript:;" onclick="showFade(this.id)"   >
	                        <span class="guide_1_font">&nbsp;&nbsp;&nbsp;&nbsp;<i class="fa fa-address-book"></i>已办业务&nbsp;<span id="fa-angle-img1" class="fa fa-angle-left fa-angle-img"></span></span>
	                      </a>
	                      
	                       <ul class="content_left_2_ul" style="display:none">
		                        <li><a href="javascript:;"  class="guide_2" ><span class="guide_2_font">&nbsp;&nbsp;<span class="fa fa-hand-o-right"></span>&nbsp;&nbsp;名称登记</span></a></li>
		                        <li><a href="javascript:;"  class="guide_2" ><span class="guide_2_font">&nbsp;&nbsp;<span class="fa fa-hand-o-right"></span>&nbsp;&nbsp;设立登记</span></a></li>
		                        <li><a href="javascript:;"  class="guide_2" ><span class="guide_2_font">&nbsp;&nbsp;<span class="fa fa-hand-o-right"></span>&nbsp;&nbsp;变更(备案)登记</span></a></li>
		                    </ul>
	                 </li>
	                 
	                 
	                 
	                 
		             <li>
		                  <a class="guide_1" id="gudie_3" href="javascript:;"   >
	                        <span class="guide_1_font">&nbsp;&nbsp;&nbsp;&nbsp;<i class="fa fa-link"></i>  可办业务</span></span>
	                      </a>
	                 </li>
		       </ul>
		    
		    
		    </div>
		
		
		
		
		
		    <div class="content_right" id="content_right">

		    </div>
		
		</div>















		<div class="foot" style="background-image: url(${base}/static/img/footer.jpg);">
		       
	           <div align="center" style="font-size:12px;">请使用IE8及以上浏览器或Firefox,chrome等浏览器进行访问</div>
	           <div align="center" style="font-size:12px">山西省工商行政管理局 版权所有</div>
	           <div align="center" style="font-size:12px">地址：山西省太原市长风大街108号 邮编：030006 电话：0351-7680468</div>
		</div>


	</div>
</body>



</html>
